<template>
  <md-popup id="popup-container" v-model="value" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
    <md-popup-title-bar title="选择时间" ok-text="确认" cancel-text="取消" @confirm="confirm" @cancel="cancel"></md-popup-title-bar>
    <div class="container">
      <div class="hint">
        <img class="hint-icon" :src="require('@/assets/imgs/tk_ts.png')" />
        <div class="theme-str">待出发行程预售期为{{maxDays}}天</div>
      </div>
      <md-picker
        class="picker"
        ref="picker"
        :data="pickerData"
        :cols="1"
        :default-index="pickerDefaultIndex"
        is-view
        @initialed="onPickerInitialed"
        @change="onPickerConfirm"
      ></md-picker>
    </div>
  </md-popup>
</template>

<script>
import { Popup, PopupTitleBar, Picker } from 'mand-mobile';
import Moment from 'moment';
import { extendMoment } from 'moment-range';
const moment = extendMoment(Moment);
moment.locale('zh-cn');

export default {
  name: 'time-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Picker.name]: Picker
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    }
  },
  data() {
    return {
      pickerData: [],
      pickerDefaultIndex: [0, 0],
      maxDays: 7,
      confirmedTime: {
        timeStr: '',
        time: null
      }
    };
  },
  created() {
    this.configDates();
  },
  methods: {
    confirm() {
      this.value = false;
      this.$emit('submit', this.confirmedTime);
    },
    cancel() {
      this.value = false;
      this.$emit('cancel');
    },
    configDates() {
      let dateArr = [];
      for (let i = 0; i < this.maxDays; i++) {
        let date = moment().add(i, 'd');
        let str = '';
        switch (i) {
          case 0:
            str = '今天';
            break;
          case 1:
            str = '明天';
            break;
          case 2:
            str = '后天';
            break;
          default:
            str = date.format('dddd');
        }
        let dateObj = {
          text: date.format('MMMDo') + str,
          value: date
        };
        dateArr.push(dateObj);
      }
      this.pickerData.push(dateArr);
    },
    onPickerInitialed() {
      this.confirmedTime = this.$refs.picker.getColumnValue(0);
      this.$refs.picker.refresh();
    },
    onPickerConfirm(columnIndex, itemIndex, value) {
      this.confirmedTime = value;
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  }
};
</script>

<style lang="stylus" scoped>
#popup-container {
  .container {
    background-color: #fff;
    height: 432px;

    .hint {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 88px;
      font-size: 22px;
      color: color-text-caption;

      .hint-icon {
        width: 26px;
        height: 24px;
      }

      .theme-str {
        color: theme-color;
      }
    }
  }
}
</style>
